require(['./config'], () => {
    require(['template','jquery','header'],(template,jquery,header)=>{
        class Shopping{
            constructor(){
                this.init()
            }
            init(){
            // 根据 localStorage的数据去渲染页面
           const cartList = window.localStorage.getItem('cart')
          console.log(cartList);
          
           
                //判断里面是否有东西   
                if(cartList){
                    // 渲染
                    this.cartList = JSON.parse(cartList)
                    
                    // console.log(this.cartList[0].src)
                    this.rende()
                }else{
                    $('#kuo').hide()
                    $('.shanx').show()
                }       
            }
            rende(){//页面渲染以后
              
                $('.shnPig').html(template('niqidm',{cartList:this.cartList}))
                // 计算机渲染一次页面默认计算一次总价
                this.jisuan()
                this.checks()
                this. quanSp()
                this.butt()
                this.jiag()
                this.shanCh()
                this.quanxuan()
            }
            
           jisuan(){
            // 计算总价只要对总价操作一次就重新渲染一次
            // 记住只要是计算价格的东西最好用归并
            const money = this.cartList.reduce((total, shop) => {
              console.log(shop.price);
                if (shop.check) { //判断里面是否有checkinput的勾勾
                  total += shop.price * shop.count
                }
                return total
              }, 0)
            $('#mone').html(money)
            
           }
           checks(){//获取input焦点事件状态被修改状态被修改 
            const _this = this 
            $('.checks').on('change',function(){
                  // 找到id                  
                  // console.log($(this).parents('tr'));         
                  const id = Number($(this).parents('tr').attr('date-id'))    //他的上一級因爲取到的是字符串  
                  // console.log(id);
                  _this.cartList = _this.cartList.map(shop=>{
                    // 根据id找到当前商品当前状态是什么布尔值就是什么布尔值
                  if(shop.id == id){
                      //shop.id是一个文本型的  ===是完全一样 所以要==6666
                      // console.log(shop.id);              
                    shop.check = $(this).prop('checked')
                  }
                  return shop
                }) 
               window.localStorage.setItem('cart',JSON.stringify(_this.cartList))
            //    点击之后状态值有可能会改变所以需要重新计算也就是说需要调方法
            _this.jisuan()//调用重新计算
            })
           }
           quanSp(){
            // console.log( $('.shu'));
            // 购物车数量第一步你要想到跟localStrage数据有关 所以要把数据取出来重头去算
            let cart = window.localStorage.getItem('cart')//取
            // 判断如果里面有数据值
            let count = 0 //如果为空就等于0下面else就不用写了
            if(cart){
              cart = JSON.parse(cart)//如果有那么转为数组来算总价
              count= cart.reduce((all,shop)=>{
                // console.log(all);
                all +=shop.count
                return all
              },0)
            }
            $('.shu').html(count) 
           }
           butt(){//加
            const _this = this    
            $('.isn').on('click',function(){ //点击的时候
              let figure = $(this).parents('tr').find('.in').val()-0// input的值
             const Id = Number($(this).parents('tr').attr('date-id') )//获取id
             _this.cartList = _this.cartList.map(gulo=>{ //遍历新数组
              if(gulo.id == Id){ //判断是否相等
                gulo.count+=1 //数据++
                $(this).parents('tr').find('.in').val(++figure)
              }
              return gulo
             })
             window.localStorage.setItem('cart',JSON.stringify(_this.cartList))  //重新存
             _this.jisuan() //调用计算方法
             _this.quanSp() //调用全部商品的数量
            })
           }
           jiag(){ //减号
            const _this = this    
            $('.isa').on('click',function(){ //点击的时候
              let figure = $(this).parents('tr').find('.in').val()-0// input的值
             const Id = Number($(this).parents('tr').attr('date-id') )//获取id
             _this.cartList = _this.cartList.map(gulo=>{ //遍历新数组
              if(gulo.id == Id){ //判断是否相等
                gulo.count-- //数据++
                $(this).parents('tr').find('.in').val(--figure)
              }
              return gulo
             })
             window.localStorage.setItem('cart',JSON.stringify(_this.cartList))  //重新存
             _this.jisuan() //调用计算方法
             _this.quanSp() //调用全部商品的数量
            })
           }
           shanCh(){//删除
            let _this = this
            $('.shac').on('click',function(){
             let id = $(this).parents('tr').attr('date-id')-0 //拿到id
             let dele = _this.cartList //拿到数据
             dele.map(function(shop,index){
               if(shop.id == id){
                  dele.splice(index,1)
               }
              return shop
             })
             $(this).parents('tr').remove()
             window.localStorage.setItem('cart',JSON.stringify(_this.cartList))  //重新存
             _this.jisuan() //调用计算方法
             _this.quanSp() //调用全部商品的数量
             _this.init()
            })
           }
           quanxuan(){
            const _this = this
            $('.ches').on('change',function(){  
            let ckbo =$(this).prop('checked') //获取勾选状态
            console.log();

            _this.cartList=_this.cartList.map(shop=>{
              if(shop.check === true){ //布尔值判断
                shop.check = $(this).prop('checked')
                $('.checks').prop('checked')
              }else{
                shop.check = $(this).prop('checked')
              }
              return shop
            }) 
            $('.ches').prop('checked',ckbo)
            $('.checks').prop('checked',ckbo)
            window.localStorage.setItem('cart',JSON.stringify(_this.cartList))  //重新存
            _this.jisuan() //调用计算方法
            _this.quanSp() //调用全部商品的数量
            })
            // $('.ches').on('change',()=>{
           
            //   // $('input').prop('checked',true)
            //   let ckbo =$('.ches').prop("checked")
            //   if(ckbo){
            //     $('input').prop('checked',true)
            //   }else{
            //     $('input').prop('checked',false)
            //   }
            // })
           }
        }
        new Shopping
    })
})